<script setup lang="ts">

import axios from 'axios'
import { useLevelStore } from "@/stores/level"
import { onMounted, ref } from 'vue'
// import type { ComponentSize } from 'element-plus'
import { subjectPage, type SubjectType } from "@/api/education"
import { useRouter } from 'vue-router';





//创建路由实例
const router = useRouter()

//表单参数
const formInline = ref({
    level: "",
    pageIndex: 1,
    pageSize: 10
})
//总页数
const total = ref(0)
//pinia的数据
const levelstore = useLevelStore()
//表单数据
const tableData = ref<SubjectType[]>([])

//获取列表接口
function getsubjectList() {
    subjectPage(formInline.value).then(res => {
        console.log(res, "subject");
        if (res.code === 1) {
            tableData.value = (res.response?.list as SubjectType[])
            total.value = (res.response?.total as number)
        }

    })
}
getsubjectList()
// function getsubjectList() {
//     axios({
//         url: "/api/api/admin/education/subject/page",
//         method: "post",
//         data: {
//             pageIndex: 1,
//             pageSize: 10,
//         }
//     }).then(res => {
//         console.log(res.data)
//         if (res.data.message == "成功") {
//             tableData.value = res.data.response.list
//             total.value = res.data.response.total || 0
//         }
//     })
// }

//每页大小变化
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
    formInline.value.pageSize = val;
    getsubjectList()
}

//当前页修改
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    formInline.value.pageIndex = val;
    getsubjectList()
}

//搜索
const onSubmit = () => {
    console.log('submit');
    console.log(formInline.value);
    getsubjectList()
}
//添加
function handleAdd() {
    router.push("/subject/add")
}
//编辑
const handleEdit = (row: SubjectType) => {
    router.push({ path: '/subject/edit', query: { id: row.id } })
}
function handleDelete(row: SubjectType) {
    console.log("delete");
    axios({
        url: `/api/api/admin/education/subject/delete/${row.id}`,
        // method: "delete"
    }).then(res => {
        console.log(res.data)
        // if (res.data.message == "成功") {
        //     tableData.value = res.data.response.list
        //     total.value = res.data.response.total || 0
        // }
    })
}
// const size = ref<ComponentSize>('default')


// onMounted(() => {
//     getsubjectList()
// })
</script>

<template>
    <div>
        <!-- <h1>学科列表</h1> -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="年级:">
                <el-select clearable v-model="formInline.level" placeholder="年级" size="large" style="width: 240px">
                    <el-option v-for="item in levelstore.list" :key="item.value" :label="item.name"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="large" @click="onSubmit">查询</el-button>
                <el-button type="primary" size="large" @click="handleAdd">添加</el-button>
            </el-form-item>
        </el-form>
        <!-- <h4 style="margin: 2%;">
            年级: <el-select aria-required="true" prepend="年级" v-model="grade" placeholder="年级" size="large"
                style="width: 25%"></el-select>
            <el-button type="primary" style="margin-left: 10px;">查询</el-button>
            <el-button type="primary">添加</el-button>
            </h4> -->
        <div style="padding: 20px;">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="id" label="id" />
                <el-table-column prop="name" label="学科" />
                <el-table-column prop="levelName" label="年级" />
                <el-table-column fixed="right" label="操作">
                    <template #default="scope">
                        <el-button @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button @click="handleDelete(scope.row)" type="danger">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="bt">
            <!-- <span>共{{ total }}条</span>
            <el-select v-model="pageSize" placeholder="请选择" style="width: 100px" @change="handleSizeChange">
                <el-option v-for="size in pageSizes" :key="size" :label="`${size}条/页`" :value="size" />
            </el-select>
            <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
                :current-page="currentPage" @current-change="handlePageChange" />
            <div class="btr">
                <span >前往</span> <el-input v-model="inputPage" placeholder="1" style="width:30px" @keyup.enter="goToPage" /> <span> 页</span>
            </div> -->
            <div class="demo-pagination-block">
                <el-pagination v-model:current-page="formInline.pageIndex" v-model:page-size="formInline.pageSize"
                    :page-sizes="[5, 10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>
<style>
.bt {
    display: flex;
    align-items: center;
    margin-top: 20px;
    gap: 10px;
}

.btr {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
}
</style>
